<template>
  <div class="setting-background">
    <setting-win />
    <div class="mb10">
      <div>{{ $t('setting.background') }}</div>
    </div>
    <system-select
      :value="systemSettingStore.$state.deskBackgroundType"
      :list="backgroundTypeList"
      @change="backgroundTypeChange"
    />
    <template v-if="systemSettingStore.$state.deskBackgroundType === 'image'">
      <div class="mb10 pt30">
        <div>{{ $t('setting.selectPicture') }}</div>
      </div>
      <ul class="picture">
        <li
          v-for="item in backgroundImage"
          :key="item"
          :class="{ checked: item === systemSettingStore.$state.deskWallpaper }"
          @click.stop="handleSelectWallpaper(item)"
        >
          <img :src="item" alt="image" />
        </li>
      </ul>
      <system-button @click.stop="handleChangePicture">
        {{ $t('default.browse') }}
      </system-button>
      <div class="mb10 pt30">
        <div>{{ $t('setting.selectAgreement') }}</div>
      </div>
      <system-select
        :value="systemSettingStore.$state.deskBackgroundImageType"
        :list="backgroundAgreementList"
        @change="backgroundImageTypeChange"
      />
    </template>
    <template v-else-if="systemSettingStore.$state.deskBackgroundType === 'color'">
      <div class="mb10 pt30">
        <div>{{ $t('setting.selectYourColor') }}</div>
      </div>
      <ul class="color-list">
        <li
          v-for="item in backgroundColor"
          :key="item"
          :class="{ checked: item === systemSettingStore.$state.deskWallpaperColor }"
          :style="{ backgroundColor: item }"
          @click.stop="handleCheckedColor(item)"
        ></li>
      </ul>
      <div class="change-color" @click.stop="changeColor">
        <div class="add mr10"><i class="iconfont wos-add" /></div>
        {{ $t('setting.selectOwnColor') }}
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import SettingWin from '@/components/systemWindow/systemSetting/settingWin.vue'
import { computed, reactive } from 'vue'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'
import { getFileType, getImageUrl, readFile, selectColor, selectFile } from '@/utils/utils'
import { useI18n } from 'vue-i18n'
import { systemMessage } from '@/base/systemMessage/systemMessageInstance'
import { addFileDBStore, deleteFileDBStore, getFileDBStore } from '@/dbStore/fileStore'
import { WALLPAPER } from '@/hooks/systemWindowHooks'
import type { DeskBackgroundType, DeskBackgroundImageType } from '@/stores/desk/systemSetting'

const i18n = useI18n()
const systemSettingStore = useSystemSettingStore()

// 背景图
const backgroundImage = reactive([
  getImageUrl('bg2.jpg'),
  getImageUrl('background/bg01.jpg'),
  getImageUrl('background/bg02.jpg'),
  getImageUrl('background/bg03.jpg'),
  getImageUrl('background/bg04.jpg'),
  getImageUrl('background/bg05.jpg')
])

// 背景色列表
const backgroundColor = reactive([
  'rgb(255,140,0)',
  'rgb(232,17,35)',
  'rgb(209,52,56)',
  'rgb(195,0,82)',
  'rgb(191,0,119)',
  'rgb(149,0,132)',
  'rgb(136,23,152)',
  'rgb(116,77,169)',
  'rgb(16,137,62)',
  'rgb(16,124,16)',
  'rgb(1,133,116)',
  'rgb(45,125,154)',
  'rgb(0,99,177)',
  'rgb(107,105,214)',
  'rgb(142,140,216)',
  'rgb(135,100,184)',
  'rgb(3,131,135)',
  'rgb(72,104,96)',
  'rgb(82,94,84)',
  'rgb(126,115,95)',
  'rgb(70,68,67)',
  'rgb(81,92,107)',
  'rgb(74,84,89)',
  'rgb(0,0,0)'
])

// 背景类型选项
const backgroundTypeList = computed(() => [
  { label: i18n.t('default.picture'), value: 'image' },
  { label: i18n.t('default.color'), value: 'color' }
  // { label: i18n.t('default.magic'), value: 'play' }
])

// 背景类型选项
const backgroundAgreementList = computed(() => [
  { label: i18n.t('default.fill'), value: 'fill' },
  { label: i18n.t('default.contain'), value: 'contain' },
  { label: i18n.t('default.cover'), value: 'cover' }
])
// 切换背景图
const backgroundTypeChange = (value: DeskBackgroundType) => {
  systemSettingStore.setDeskBackgroundType(value)
}

// 切换背景图
const backgroundImageTypeChange = (value: DeskBackgroundImageType) => {
  systemSettingStore.setDeskBackgroundImageType(value)
}

// 选择背景图
const handleSelectWallpaper = async (img: string) => {
  if (await getFileDBStore(WALLPAPER)) await deleteFileDBStore(WALLPAPER)
  systemSettingStore.setDeskBackgroundWallpaper(img)
}

// 选择颜色
const handleCheckedColor = (color: string) => {
  systemSettingStore.setDeskBackgroundWallpaperColor(color)
}

// 选择本地图片背景
const handleChangePicture = async () => {
  const files = await selectFile({ accept: '.png,.jpeg,.jpg,.gif,.bmp,.webp' })
  const type = getFileType(files[0].name)
  if (!['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(type)) {
    systemMessage.warning('仅支持选择png、jpg、jpeg、gif、bmp、webp格式的图片')
    return
  }
  const base64 = await readFile(files[0], 'toBase64')
  await addFileDBStore(WALLPAPER, base64)
  systemSettingStore.setDeskBackgroundWallpaper(base64)
}

// 自定义颜色
const changeColor = async () => {
  const color = await selectColor()
  handleCheckedColor(color)
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/mixin';

.setting-background {
  padding-bottom: 90px;

  .picture {
    padding-bottom: 10px;
    display: flex;
    align-items: center;

    > li {
      width: 78px;
      height: 78px;
      border: 2px solid transparent;
      margin-right: 2px;

      &.checked {
        border-color: var(--theme-color);
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
      }
    }
  }

  .color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    width: calc(48px * 8);

    > li {
      box-sizing: border-box;
      width: 46px;
      height: 46px;
      border: 2px solid transparent;

      &.checked {
        border-color: var(--theme-color);
      }
    }
  }

  .change-color {
    margin-top: 10px;
    box-sizing: border-box;
    width: 458px;
    height: 60px;
    padding: 10px;
    display: flex;
    align-items: flex-start;

    &:hover {
      @include hover-model;
    }

    .add {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      box-sizing: border-box;
      border: 2px solid #fff;
      font-weight: bolder;
      font-size: 16px;
    }
  }
}
</style>
